<template>
    <div class="login">
        <mt-field label="" placeholder="用户名" v-model="user.username"></mt-field>
        <mt-field label="" placeholder="密码" type="password" v-model="user.password"></mt-field>
        <mt-button size="large" type="primary" class="loginBtn" @click="login">登录</mt-button>
        <router-link to="" class="mui-pull-left btn" >忘记密码</router-link>
        <router-link to="" class="mui-pull-right btn">免费注册</router-link>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            user: {
                username: '',
                password: '',
            },
            users: [{
                id: 1,
                username: 'root',
                password: 'root'
            }]
        }
    },
    methods: {
        login() {
            if (this.user.username.trim() == '') {
                MessageBox('帅比作者提示您', '请输入邮箱');
                return;
            }
            if (this.user.password.trim() == '') {
                MessageBox('帅比作者提示您', '请输入密码');
                return;
            }
            this.users.some(item => {
                if (this.user.username == item.username && this.user.password == item.password) {
                    Toast({
                        message: '登录成功',
                        position: 'top',
                        duration: 1000
                    });
                    this.$router.push({path: 'membar/userInfo'})
                    localStorage.setItem('user', JSON.stringify(this.user))
                    return;
                }
                MessageBox('帅比作者提示您', '密码输入不正确');
            })    
        }
    },
    created() {
        const user = JSON.parse(localStorage.getItem('user'))
        if (user) this.$router.push({path: 'membar/userInfo'})
    }
}
</script>

<style scoped>
    .login {
        padding: 20px;
    }
    .btn {
        padding: 10px 0px;
        font-size: 14px;
        color: #999;
    }
</style>
